<template>
  <div class="page_padding out_main">
    <div class="notice_con">
      <van-tabs
        @click="onTabsClick"
        class="cont-tab"
        :class="boardTabsData.length == 1 ? 'out-main-width1' : 'out-main-width2'"
        v-model="firstType"
        :sticky="true"
        line-width="35"
        line-height="2"
        title-active-color="#d80a06"
        title-inactive-color="#333333"
        border
        swipeable
        v-if="userType !== '1'">
        <van-tab v-for="tab in boardTabsData" :key="tab.id" :title="tab.name" :name="tab.id"></van-tab>
      </van-tabs>
      <logistics-list
        :userType="userType"
        v-if="firstType === '0' || firstType === '1'"
        :firstType="firstType"></logistics-list>
      <logistics-statistics :userType="userType" v-if="firstType === '2'" :firstType="firstType"></logistics-statistics>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import logisticsList from './components/logisticsList'
import logisticsStatistics from './components/logisticsStatistics'
export default {
  name: 'logisticsManage',
  components: {
    logisticsList,
    logisticsStatistics,
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.userInfo),
      firstType: '0',

      boardTabsData: [],
      boardTabsData1: [
        { name: '物品领用', id: '0' },
        { name: '物品审核', id: '1' },
        // { name: '统计汇总', id: '2' },
      ],
      userType: '1',
      tabList: [],
      buttonList: [],
    }
  },
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isApplyRole']),
  },
  created() {
    this.setTabs()
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    onTabsClick() {},
    setTabs() {
      const arr = []
      if (this.isOtherRole || this.isNormalRole) {
        arr.push(this.boardTabsData1[0])
      }
      if (this.isOrgRole) {
        this.userType = '2'
        arr.push(...this.boardTabsData1)
      }
      if (this.isApplyRole) {
        this.userType = '3'
        arr.push(this.boardTabsData1[1])
      }
      this.boardTabsData = Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse)

      if (this.$route.query.id && this.$route.query.flag === '0') {
        this.firstType = '1'
      } else {
        this.firstType = this.boardTabsData[0].id
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.out_main {
  padding-top: 0 !important;
  /deep/ .van-popup {
    position: absolute;
  }
}
.out-main-width1 {
  width: 50%;
}
.out-main-width2 {
  width: 100%;
}
.notice_con {
  padding: 3px 0 10px;
  width: 100%;

  .cont-tab {
    height: 100%;
    /deep/.van-tabs__wrap {
      height: 35px;
      background: #fff;
      border-bottom: 1px solid #efefef;
      .van-tab--active {
        .van-tab__text {
          font-size: 15px !important;
        }
      }
    }
  }
}
</style>
